<script setup lang="ts">
import { ref } from 'vue'

const value = ref('')
</script>

<template>
    <div class="search-container">
        <div class="header">
            <van-icon name="arrow-left" size="20" />
            <van-search v-model="value" autofocus clearable shape="round" 
            placeholder="歌手 、歌曲或专辑名" />
        </div>
    </div>
</template>

<style lang="scss">
.search-container {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    background-image: linear-gradient(to bottom right, #293d48, #000000);
    z-index: 2;

    .header{
        display: flex;
        align-items: center;
        margin: 0 16px;

        .van-search {
            flex: 1;
            background-color:transparent;
            .van-search__content{
                background-color:rgba(0,0,0,0.3);

                .van-field__control{
                    color:#ccc;

                }
            }
        }
    }
}
</style>